<template>
    <view class="liveLog">
        <uv-sticky :offset-top="offsetTop">
            <view class="flex flex-align flex-bt searchBar ">
                <uni-search-bar class="flex-1" placeholder="输入昵称/ID" cancelButton="none"
                    :focus="false" v-model="searchValue">
                </uni-search-bar>
                <view class="searchText" @click="cancel">搜索</view>
            </view>
        </uv-sticky>
        <view class="liveLogList">
            <view class="flex flex-align flex-bt liveLogTitle">
                <view class="left">会员用户</view>
            </view>
            <view class="liveLogItem  out-shadow" v-for="(item, index) in list" :key="index">
                <view class="liveLogItemLeft">
                    <view class="liveLogItemLeftImg">
                        <image :src="item.headimg" mode="aspectFill"></image>
                    </view>
                    <view class="liveLogItemLeftInfo">
                        <view class="liveLogItemLeftInfoName">{{ item.nickname }}</view>
                        <view class="liveLogItemLeftInfoID flex flex-align">
                            <view>用户ID : {{ item.id }}</view>
                        </view>
                    </view>
                </view>
                <view class="liveLogItemRight flex flex-align">
                    <view class="list flex flex-align flex-1 flex-center" @click="jinLingred(item)">
                        <image src="/static/teamcenter/user01.png" mode="scaleToFill" />
                        <view :class="{ 'red': item.is_red === 1 }">{{ item.is_red === 1 ? '禁领红包' : '开启红包' }}</view>
                    </view>
                    <view class="list flex flex-align flex-1 flex-center" @click="selectDian(item)">
                        <image src="/static/teamcenter/user02.png" mode="scaleToFill" />
                        <view>{{ item.rank_id === 5 ? '取消店员' : '设置店员' }}</view>
                    </view>
                    <view class="list flex flex-align flex-1 flex-center" @click="goLookLog(item)">
                        <image src="/static/teamcenter/user03.png" mode="scaleToFill" />
                        <view>观看记录</view>
                    </view>
                </view>
                <view class="more">
                    <uni-icons type="more-filled" size="20" @click="openMore(item)"></uni-icons>
                    <view v-if="item.isopen" class="morePopover">
                        <view class="morePopoverList" @click="close">
                            <view class="morePopoverItem" @click.stop="changeStatus(item)">
                                <image src="/static/teamcenter/user04.png" mode="scaleToFill" />
                                <view>{{ item.status === 1 ? '禁用' : '启用' }}</view>
                            </view>
                            <view class="morePopoverItem" @click.stop="removeUser(item)">
                                <image src="/static/teamcenter/user05.png" mode="scaleToFill" />
                                <view>删除</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <NoData style="padding-top: 10vh;" v-if="list.length == 0" :img="'/static/noData/nodata02.png'" />
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import API_CENTER from '@/api/teamcenter';
import { confirmDialog, goUrl, secondsToTime, setCache, toast } from '@/utils/index'
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll';
import VastPopover from "@/uni_modules/vast-popover/components/vast-popover/index.vue";
import NoData from '@/components/noData/noData.vue';
const searchValue = ref<string>('')
const total_count = ref<number>(0)
const urls = ref<any>([])
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
onLoad((options: any) => {
    loadMore()
})
const { list, isLoading, hasMore, loadMore, reset, params } = useInfiniteLoad(API_CENTER.getUserList, {
    initialParams: {},
    transformResponse: (response) => {
        total_count.value = response.total_count
        return response.list || [];
    }
});

const cancel = () => {
    params.keyword = searchValue.value
    reset()
    loadMore()
}
const popover = ref<typeof VastPopover>()
const close = () => {
    console.log(popover.value?.close)
}

const goLookLog = (item: any) => {
   
    goUrl('/pagesA/lookLog/lookLog?id='+item.id,true)
}

const openMore = (item: any) => {
    item.isopen = !item.isopen
}

const jinLingred = (item: any) => {
    confirmDialog('提示', '确定要' + (item.is_red === 1 ? '禁领' : '开启') + '红包吗？').then((res) => {
        if (res) {
            API_CENTER.setUserRed({
                uuid: item.id, is_red: item.is_red === 1 ? 2 : 1
            }).then(() => {
                toast('操作成功')
                setTimeout(() => {
                    reset()
                    loadMore()
                }, 1000)
            })
        }

    })
}

const selectDian = (item: any) => {
    confirmDialog('提示', '确定要' + (item.rank_id === 5 ? '取消店员' : '设置店员') + '吗？').then((res) => {
        console.log(res)
        if (res) {
            API_CENTER.setUserShop({
                clerk_uuid: item.id, type: item.rank_id === 5 ? 2 : 1
            }).then((res) => {
                toast('操作成功')
                setTimeout(() => {
                    reset()
                    loadMore()
                }, 1000)
            })
        }

    })
}

const changeStatus = (item: any) => {
    confirmDialog('提示', '确定要' + (item.status === 1 ? '禁用' : '启用') + '用户吗？').then((res) => {
        if (res) {
            API_CENTER.setUserStatus({
                set_uuid: item.id, set_type: item.status === 1 ? 1 : 2
            }).then((res) => {
                toast('操作成功')
                setTimeout(() => {
                    reset()
                    loadMore()
                }, 1000)
            })
        }

    })
}

const removeUser = (item: any) => {
    confirmDialog('提示', '确定要删除用户吗？').then((res) => {
        if (res) {
            API_CENTER.delUser({
                del_uuid: item.id
            }).then((res) => {
                toast('操作成功')
                setTimeout(() => {
                    reset()
                    loadMore()
                }, 1000)
            })
        }

    })
}

onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
.searchBar {
    background: #fff;
    padding-right: 20rpx;
    .searchText {
        background: #3C7CFF;
        color: #fff;
        padding: 10rpx 30rpx;
        border-radius: 30rpx;
    }
}

.liveLogList {
    padding: 20rpx;

    .liveLogTitle {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 30rpx;
    }
}

.liveLogItem {
    background: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    position: relative;

    .more {
        position: absolute;
        top: 30rpx;
        right: 30rpx;

        .morePopover {
            .morePopoverList {
                position: absolute;
                top: 40rpx;
                right: 0rpx;
                background: #fff;
                padding: 20rpx 20rpx 0;
                border-radius: 20rpx;
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

                .morePopoverItem {
                    display: flex;
                    align-items: center;
                    width: 130rpx;
                    margin-bottom: 20rpx;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

.liveLogItemLeft {
    display: flex;
    align-items: center;
}

.liveLogItemLeftImg {
    image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
    }
}

.liveLogItemLeftInfo {
    flex: 1;
    margin-left: 20rpx;

    .liveLogItemLeftInfoID {
        margin-top: 10rpx;
        padding: 5rpx 10rpx;
        font-size: 24rpx;
        border-radius: 30rpx;
        color: #999;
    }
}

.liveLogItemLeftInfoName {
    font-size: 28rpx;
    font-weight: bold;
}

.liveLogItemRight {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #323233;
    font-weight: bold;

    .list {
        text-align: center;

        image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }

        .red {
            color: #E14159;
        }
    }
}
</style>